<template>
  <div>
    <div class="vx-row ">
      <div class="vx-col w-full lg:w-1/2 mb-base" style="overflow: hidden">
        <img style="height: 100%;" src="./build.png" alt="">
      </div>
      <div class="vx-col w-full lg:w-1/4 mb-base">
        <vx-card title="冷水系统">
          <!-- SLOT = ACTIONS -->

          <div slot="no-body">
            <!-- CHART -->
            <vue-apex-charts type=pie height=134 class="my-12" :options="analyticsData.customersPie.chartOptions" :series="customersData.series" />

            <!-- CHART DATA -->
            <ul class="mb-1">
              <li v-for="customerData in customersData.analyticsData" :key="customerData.customerType" class="flex justify-between py-3 px-6 border d-theme-border-grey-light border-solid border-r-0 border-l-0 border-b-0">
                                <span class="flex items-center">
                                    <span class="inline-block h-3 w-3 rounded-full mr-2" :class="`bg-${customerData.color}`"></span>
                                    <span class="font-semibold">{{ customerData.customerType }}</span>
                                </span>
                <span>{{ customerData.counts }}</span>
              </li>
            </ul>
          </div>

        </vx-card>
      </div>

      <div class="vx-col w-full lg:w-1/4 mb-base">
        <vx-card title="热水系统">
          <!-- SLOT = ACTIONS -->

          <div slot="no-body">
            <!-- CHART -->
            <vue-apex-charts type=pie height=134 class="my-12" :options="analyticsData.customersPie.chartOptions" :series="customersData.series" />

            <!-- CHART DATA -->
            <ul class="mb-1">
              <li v-for="customerData in customersData.analyticsData" :key="customerData.customerType" class="flex justify-between py-3 px-6 border d-theme-border-grey-light border-solid border-r-0 border-l-0 border-b-0">
                                <span class="flex items-center">
                                    <span class="inline-block h-3 w-3 rounded-full mr-2" :class="`bg-${customerData.color}`"></span>
                                    <span class="font-semibold">{{ customerData.customerType }}</span>
                                </span>
                <span>{{ customerData.counts }}</span>
              </li>
            </ul>
          </div>

        </vx-card>
      </div>
    </div>
    <div class="vx-row ">
      <div class="vx-col w-full lg:w-1/2 mb-base">
        <vx-card title="主医院">
          <div slot="no-body" class="mainHospital">
            <div class="vx-row pt-8 pb-8" style="justify-content: center;">
                <div class="vx-col bgccc w-1/6 mr-8" align="center">
                <h6>Floor2</h6>
                <vs-input class="mb-2" style="width: 100%;" size="small"  value="0" />
                <vs-input class="mb-2" style="width: 100%;" size="small" value="0"  />
                <vs-input class="mb-2" style="width: 100%;" size="small" value="0"  />
              </div>
              <div class="vx-col bgccc w-1/6 mr-8" align="center">
                <h6>Floor2</h6>
                <vs-input class="mb-2" style="width: 100%;" size="small" value="1"  />
                <vs-input class="mb-2" style="width: 100%;" size="small" value="0"  />
                <vs-input class="mb-2" style="width: 100%;" size="small"  value="0" />
              </div>
              <div class="vx-col bgccc w-1/6 mr-8" align="center">
                <h6>Floor2</h6>
                <vs-input class="mb-2" style="width: 100%;" size="small" value="0"  />
                <vs-input class="mb-2" style="width: 100%;" size="small" value="2"  />
                <vs-input class="mb-2" style="width: 100%;" size="small" value="0"  />
              </div>
            </div>
          </div>
        </vx-card>
      </div>
      <div class="vx-col w-full lg:w-1/2 mb-base">
        <vx-card title="时间线">
          <!-- SLOT = ACTIONS -->
          <div style="height: 200px;">
            <VuePerfectScrollbar ref="chatLogPS" class="scroll-area" :settings="settings">
              <div ref="chatLog">
                2020
                <vs-collapse type="margin">

                  <vs-collapse-item>
                    <div slot="header">
                      9月
                    </div>
                    <h4>SF-O</h4>

                    <p>
                      <vs-button type="line" @click="popupActive=true">温度过载</vs-button>
                    </p>

                  </vs-collapse-item>

                  <vs-collapse-item>
                    <div slot="header">
                      8月
                    </div>
                    <h4>SF-2</h4>
                    <p>
                      <vs-button type="line" @click="popupActive=true">温度过载</vs-button>
                    </p>
                  </vs-collapse-item>

                  <vs-collapse-item>
                    <div slot="header">
                      7月
                    </div>
                    <h4>SF-4</h4>
                    <p>
                      <vs-button type="line" @click="popupActive=true">温度过载</vs-button>
                    </p>
                  </vs-collapse-item>
                </vs-collapse>
              </div>
            </VuePerfectScrollbar>
          </div>
        </vx-card>
      </div>
    </div>
    <vs-popup class="holamundo" title="详情" :active.sync="popupActive">
      <div class="vx-row mb-6">
        <div class="vx-col sm:w-1/3 w-full">
          <span>用户</span>
        </div>
        <div class="vx-col sm:w-2/3 w-full">
          王能
        </div>
      </div>
      <div class="vx-row mb-6">
        <div class="vx-col sm:w-1/3 w-full">
          <span>服务时间</span>
        </div>
        <div class="vx-col sm:w-2/3 w-full">
          2020/09/11 11:45:33
        </div>
      </div>
      <div class="vx-row mb-6">
        <div class="vx-col sm:w-1/3 w-full">
          <span>初始值</span>
        </div>
        <div class="vx-col sm:w-2/3 w-full">
         01
        </div>
      </div>
    </vs-popup>
  </div>
</template>

<script>
  import VuePerfectScrollbar from 'vue-perfect-scrollbar'
  import VueApexCharts from 'vue-apexcharts'
  import analyticsData from './analyticsData.js'
    export default {
        name: "Building",
      components:{VueApexCharts,VuePerfectScrollbar},
      data(){
          return{
            popupActive: false,
            customersData:{},
            analyticsData:{},
            settings: { // perfectscrollbar settings
              maxScrollbarLength: 60,
              wheelSpeed: .60,
            },
          }
      },
      mounted() {
        this.$refs.chatLogPS.$el.scrollTop = this.$refs.chatLog.scrollHeight;
      },
      created(){
          this.analyticsData = analyticsData


        // Customers
        this.$http.get("/api/card/card-analytics/customers")
          .then((response) => { this.customersData = response.data })
          .catch((error) => { console.log(error) })

      }
    }
</script>

<style lang="scss" scoped>
  /*--primaryColor : 'rgb('--vs-primary*/
  .bgccc{
    background: #c2c6dc;
  }
  .mainHospital{
    h6{
      line-height: 36px;
      /*background: rgba(var(--vs-primary), 1);*/
    }
  }
</style>
